<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-26 11:57:41
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-08-28 17:23:09
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\fileDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-dialog
      title="文件预览"
      :visible.sync="fileModal.open"
      width="65%"
      :before-close="fileModal.close"
      :append-to-body="true"
      :fullscreen="true"
    >
      <el-button
        type="primary"
        class="downloadBtn"
        size="mini"
        @click="handleDownload"
        >下载</el-button
      >
      <div class="bodyFile">
      <div style="margin-bottom:12px;font-size:14px;color:#333;font-weight:bold">{{fileModal.row.name}}</div>
        <img
          v-if="fileModal.row.formatType === 'img'"
          :src="fileModal.row.url"
          alt=""
        />
        <VueOfficeDocx
          :src="fileModal.row.url"
          style="width: 100%"
          v-if="fileModal.row.formatType === 'word'"
        />
        <VueOfficePdf
          :src="fileModal.row.url"
          style="width: 100%"
          v-if="fileModal.row.formatType === 'pdf'"
        />
        <VueOfficeExcel
          :src="fileModal.row.url"
          style="width: 100%; height: 80vh"
          v-if="fileModal.row.formatType === 'excel'"
        />
        <iframe
          :src="fileModal.row.pptUrl"
          frameborder="0"
          width="100%"
          height="80vh"
          v-if="fileModal.row.formatType === 'ppt'"
        ></iframe>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fileModal.close">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeExcel from "@vue-office/excel";
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";
export default {
  components: {
    VueOfficeDocx,
    VueOfficePdf,
    VueOfficeExcel,
  },
  props: {
    fileModal: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    handleDownload() {
      const a = document.createElement("a");
      a.href = this.fileModal.row.url;
      a.download = this.fileModal.row.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
  },
};
</script>

<style lang="scss" scoped>
.bodyFile {
  display: flex;
  flex-direction: column;
  // justify-content: center;
}
::v-deep .el-dialog__body {
  max-height: 88vh;
  overflow-y: scroll;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e6ebf5;
}
.downloadBtn {
  position: absolute;
  right: 70px;
  top: 12px;
}
</style>